.main {
  width: 100%;
  height: 120%;
  position: relative;
}

.main .bg {
  width: 100%;
  height: 700px;
}

.main .bg .bg1,
.main .bg .bg2 {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.3;
}

.main .bg .bg1 {
  right: 10%;
  top: 30%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  animation: frame1 13s linear infinite alternate;
}

.main .bg .bg2 {
  right: 5%;
  top: 10%;
  border-radius: 70% 30% 27% 73% / 61% 47% 53% 39%;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  animation: frame2 20s linear infinite alternate;
}

.main .bg .bg3,
.main .bg .bg4 {
  position: absolute;
  width: 80px;
  height: 3px;
  background-color: red;
  border-radius: 50% 15% 15% 50%;
  transform: rotate(-45deg);
  opacity: 0.3;
}

.main .bg .bg3 {
  top: 20%;
  left: 50%;
  background: linear-gradient(to right, #fff, #8e2de2, #4a00e0);
  animation: frame3 10s linear infinite alternate;
}

.main .bg .bg4 {
  top: 30%;
  left: 30%;
  background: linear-gradient(to right, #fff, #067977, #02ffea);
  animation: frame4 15s linear infinite alternate;
}

.main .bg .bg5,
.main .bg .bg6 {
  position: absolute;
  width: 30px;
  height: 2px;
  opacity: 0.3;
}

.main .bg .bg5::after,
.main .bg .bg6::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  transform-origin: 15px 1px;
}

.main .bg .bg5::before,
.main .bg .bg6::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
}

.main .bg .bg5 {
  top: 0;
  left: 0;
  background: linear-gradient(to right, #4568dc, #b06ab3);
  animation: frame5 15s linear infinite alternate;
}

.main .bg .bg5::after {
  top: -12px;
  left: 7px;
  transform: rotate(60deg);
  background: linear-gradient(to right, #4568dc, #b06ab3);
}

.main .bg .bg5::before {
  top: -12px;
  left: -7px;
  transform: rotate(-60deg);
  background-color: #000;
  background: linear-gradient(to right, #4568dc, #b06ab3);
}

.main .bg .bg6 {
  top: 0;
  left: 0;
  background: linear-gradient(to right, #ee0979, #ff6a00);
  animation: frame6 15s linear infinite alternate;
}

.main .bg .bg6::after {
  top: -12px;
  left: 7px;
  transform: rotate(60deg);
  background: linear-gradient(to right, #ee0979, #ff6a00);
}

.main .bg .bg6::before {
  top: -12px;
  left: -7px;
  transform: rotate(-60deg);
  background: linear-gradient(to right, #ee0979, #ff6a00);
}

.main .bg .bg7,
.main .bg .bg8 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: 0.3;
}

.main .bg .bg7 {
  animation: frame7 15s linear infinite alternate;
  background-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%);
}

.main .bg .bg8 {
  background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
  animation: frame8 15s linear infinite alternate;
}

.main .bg .bg7::after,
.main .bg .bg8::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #f9f9f9;
}

.main .content {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 900px;
  height: 500px;
  background-color: red;
}

.main .content .left {
  width: 400px;
  height: 400px;
  border-radius: 10px;
  box-shadow: 0 10px 10px #000;
}

.main .hot {
  position: absolute;
  left: 75%;
  top: 55vh;
}

@keyframes frame1 {
  0% {
    transform: translate(-20%, 17%) rotate(-20deg);
  }
  25% {
    transform: translate(10%, -35%) rotate(-10deg);
  }
  50% {
    transform: translate(50%, 60%) rotate(60deg);
  }
  75% {
    transform: translate(20%, 35%) rotate(-10deg);
  }
  100% {
    transform: translate(-10%, 10%) rotate(-20deg);
  }
}

@keyframes frame2 {
  0% {
    transform: translate(10%, -20%) rotate(-20deg);
  }
  25% {
    transform: translate(-20%, -10%) rotate(0deg);
  }
  50% {
    transform: translate(30%, 40%) rotate(60deg);
  }
  75% {
    transform: translate(40%, 35%) rotate(-10deg);
  }
  100% {
    transform: translate(-10%, 10%) rotate(-20deg);
  }
}

@keyframes frame3 {
  0% {
    transform: translate(-3vw, 10vh) rotate(-30deg);
  }
  25% {
    transform: translate(-5vw, 25vh) rotate(-45deg);
  }
  50% {
    transform: translate(5vw, 30vh) rotate(-50deg);
  }
  75% {
    transform: translate(-5vw, 25vh) rotate(-45deg);
  }
  100% {
    transform: translate(-3vw, 10vh) rotate(-30deg);
  }
}

@keyframes frame4 {
  0% {
    transform: translate(100%, 23vh) rotate(-25deg);
  }
  15% {
    transform: translate(200%, 23vh) rotate(-30deg);
  }
  30% {
    transform: translate(250%, 40vh) rotate(-35deg);
  }
  45% {
    transform: translate(330%, 50vh) rotate(-40deg);
  }
  60% {
    transform: translate(250%, 40vh) rotate(-35deg);
  }
  75% {
    transform: translate(200%, 23vh) rotate(-30deg);
  }
  90% {
    transform: translate(100%, 23vh) rotate(-25deg);
  }
  100% {
    transform: translate(46%, 35vh) rotate(-30deg);
  }
}

@keyframes frame5 {
  0% {
    transform: translate(40vw, 5vh) rotate(20deg);
  }
  25% {
    transform: translate(50vw, 10vh) rotate(50deg);
  }
  50% {
    transform: translate(55vw, 15vh) rotate(90deg);
  }
  75% {
    transform: translate(50vw, 10vh) rotate(50deg);
  }
  100% {
    transform: translate(40vw, 5vh) rotate(20deg);
  }
}

@keyframes frame6 {
  0% {
    transform: translate(30vw, 20vh) rotate(20deg);
  }
  25% {
    transform: translate(40vw, 35vh) rotate(60deg);
  }
  50% {
    transform: translate(55vw, 46vh) rotate(180deg);
  }
  75% {
    transform: translate(40vw, 35vh) rotate(60deg);
  }
  100% {
    transform: translate(20vw, 20vh) rotate(20deg);
  }
}

@keyframes frame7 {
  0% {
    transform: translate(50vw, 80vh) rotate(9deg);
  }
  50% {
    transform: translate(30vw, 30vh) rotate(9deg);
  }
  100% {
    transform: translate(61vw, 29vh) rotate(18deg);
  }
}

@keyframes frame8 {
  0% {
    transform: translate(5vw, 10vh) rotate(9deg);
  }
  60% {
    transform: translate(10vw, 25vh) rotate(9deg);
  }
  80% {
    transform: translate(15vw, 30vh) rotate(9deg);
  }
  100% {
    transform: translate(5vw, 10vh) rotate(18deg);
  }
}
